﻿
@{
    ViewBag.Title = "多图文消息管理";
}
@section css
{
    <link href="/Content/scripts/zyupload/bootstrap.css" rel="stylesheet" />
    <link href="/Content/scripts/fileinput/css/bootstrap-fileupload.css" rel="stylesheet" />
    <link href="/Content/css/imageText/main.css" rel="stylesheet" />
}
<form id="editfrom">
    <div class="ct_box box_radius left">
        <div class="ct_banner">
            <span id="span_image">封面图片</span>
            <p id="span_title">标题</p>
            <div class="ban_bj">
                <a href="javascript:void(0)" onclick="editmain()">
                    <img src="/Content/images/wechat/ico005.png" />
                </a>
            </div>
        </div>
        <div class="ct_duo" id="divsubimagetext">
        </div>
        <div class="ct_tj" onclick="addsubimagetext()" style="cursor: pointer;"></div>
        <div class="clear"></div>
    </div>
    <!--box -->

    <div class="bj_box box_radius" id="adddiv">
        <i class="jt_out"></i>
        <i class="jt_in"></i>
        <input type="hidden" name="Id" id="txt_Id" value="0" />
        <input type="hidden" name="fistid" id="txt_firstid" value="0" />
        <input type="hidden" name="subid" id="txt_subid" />
        <input type="hidden" name="groupid" id="txt_groupid" value="@ViewBag.GroupId" />
        <div class="bj_dan">
            <h3>标题</h3>
            <input name="title" type="text" id="txt_title" />
        </div>
        <div class="bj_dan">
            <h3>
                <span class="left">封面</span><span class="right"><b id="b_suggestsize">建议尺寸：540像素 * 300像素</b></span><div class="clear"></div>
            </h3>
            <input type="hidden" id="txt_PicUrl" name="picUrl" />
        </div>
        <div id="fileupload" style="width: 300px;">
        </div>
        <div class="bj_dan">
            <h3>
                <span class="left">正文</span><span class="right"></span><div class="clear"></div>
            </h3>
            <textarea name="content" style="width: 100%; height: 250px"></textarea>
        </div>


        <div class="bj_dan">
            <h3>跳转链接</h3>
            <input name="gourl" type="text" id="txt_RedictUrl" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="clear"></div>

    <div class="bj_con">
        <a class="box_radius" href="/Wechat/ImageTextList">返回列表</a>
        <a class="box_radius" href="javascript:addImageText()">保存</a>
        <div class="clear"></div>
    </div>
</form>
@section scripts
{
    <script src="/Content/scripts/jquery.form.js"></script>
    <script src="/Content/kindeditor-4.1.2/kindeditor.js"></script>
    <script src="/Content/kindeditor-4.1.2/lang/zh_CN.js"></script>
    <script src="/Content/scripts/fileinput/js/bootstrap-fileupload2.js"></script>
    <script>
        var layer;
        var editor;
        var editfirst = 0;

        layui.use('layer', function () {
            layer = layui.layer;
        });

        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                allowFileManager: false,
                items: [/*'fullscreen',*/'source', '|', 'undo', 'redo', '|', 'preview', 'insertorderedlist', 'insertunorderedlist', 'clearhtml', 'quickformat', 'selectall', '|',
                    'formatblock', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'removeformat', '|', 'image', 'multiimage',
                    'table', 'baidumap',
                    'anchor', 'link', 'unlink'],
                uploadJson: '/Content/kindeditor-4.1.2/asp.net/upload_json.ashx',
                afterCreate: function () {
                }
            });
        });

        function addsubimagetext() {

            var tempStr = '<dl>';
            tempStr += '  <a href="javascript:void(0)">';
            tempStr += '	<dt>标题</dt>';
            tempStr += '  <dd>缩略图</dd>';
            tempStr += '  <div class="clear"></div></a>';
            tempStr += '   <div class="ct_dl_bj"><a href="javascript:void(0)" onclick="edit(-1,0,this)"><img src="/Content/images/wechat/ico005.png" /></a><a href="javascript:void(0)" onclick="del(-1,this)"><img src="/Content/images/wechat/ico004.png" /></a></div>';
            tempStr += '  </dl>'
            $("#divsubimagetext").append(tempStr);
        }

        function editmain() {
            var mainid = $("#txt_firstid").val();
            edit(parseInt(mainid), 1, null);
        }

        function edit(subIndex, isMain, obj) {
            editfirst = isMain;
            $("#txt_Id").val(subIndex);
            if (parseInt(subIndex) > 0) {
                var url = "/Wechat/WechatMemuAjax?sub=getImageText";
                $.post(url, { "Id": subIndex }, function (datas) {
                    var data = JSON.parse(datas);
                    if (data.status) {
                        var MsgTitle = data.data[0].title;
                        var MsgPic = data.data[0].picUrl;
                        var MsgDescriptions = data.data[0].descriptions;
                        var MsgRedictUrl = data.data[0].redictUrl;
                        $("#txt_title").val(MsgTitle);
                        $("#txt_RedictUrl").val(MsgRedictUrl);
                        $("#txt_PicUrl").val(MsgPic);
                        var pic = MsgPic;
                        if (pic != "") {
                            $('div[data-provides="fileupload"]').addClass("fileupload-exists").removeClass("fileupload-new");
                            $('.fileupload-preview').html("<img src='" + pic + "' style='width:100%'/>");
                        }
                        if (data.data[0].content) {
                            editor.html(data.data[0].content);
                        }

                    } else {
                        layer.msg(data.message);
                    }

                }, "json");
            }
            else {
                $("#txt_title").val("");
                $("#txt_RedictUrl").val("");
                $("#txt_PicUrl").val("");

                $('div[data-provides="fileupload"]').removeClass("fileupload-exists").addClass("fileupload-new");
                $('.fileupload-preview').append("");
                editor.html("");
            }

            //设置编辑器的位置

            if (isMain == 1) {
                $("#adddiv").attr("style", "margin-top:100px;");
                $("#b_suggestsize").html("建议尺寸：540像素 * 300像素");
            }
            else {
                var $dl = $(obj).parents("dl");
                var index = $("#divsubimagetext dl").index($dl[0]);
                var topheight = (index + 2) * 100;
                $("#adddiv").attr("style", "margin-top:" + topheight + "px;");
                $("#b_suggestsize").html("建议尺寸：200像素 * 200像素");
            }

        }

        function del(subIndex, obj) {
            if (subIndex < 0) {
                $(obj).parents("dl").remove();
            }
            else {
                layer.confirm(
                    '删除后信息不可恢复',
                    {
                        icon: 3,
                        title: "确定要删除吗？",
                        btn: ['确认', '取消']
                    }, function () {
                        var url = "/Wechat/WechatMemuAjax?sub=deleteImageText"
                        $.post(url,
                            { "Id": subIndex },
                            function (datas) {
                                var data = JSON.parse(datas);
                                layer.msg(data.message)
                                if (data.status)
                                    LoadImageTextGroup();
                            })
                    }
                )
            }
            editmain();
        }

        function addImageText() {
            editor.sync();
            var params = $("#editfrom").serialize();
            var groupId = $("#txt_groupid").val();
            if (parseInt(groupId) == 0 && editfirst == 0) {
                layer.msg("首次必须添加封面图文");
            }
            else {
                var url = "/Wechat/WechatMemuAjax?sub=insertOrUpdateImageTextGroup"
                $.post(url, params, function (datas) {
                    var data = JSON.parse(datas);
                    if (data.status) {
                        var url = "/Wechat/EditImageTextGroup?groupid=" + data.data;
                        location.href = url;
                    }
                    else {
                        layer.msg(data.message);
                    }
                }, "json");
            }

        }

        $(document).ready(function () {
            LoadImageTextGroup();
        });

        function LoadImageTextGroup() {
            var url = "/Wechat/WechatMemuAjax?sub=getImageText";
            var id = $("#txt_groupid").val();
            if (parseInt(id) > 0) {
                $.post(url, { "GroupId": id }, function (datas) {
                    var data = JSON.parse(datas);
                    if (data.status) {
                        if (data.data.length > 0) {

                            for (var i = 0; i < data.data.length; i++) {
                                var item = data.data[i];
                                var MsgTitle = item.title;
                                var MsgPic = item.picUrl;
                                var subid = item.id;
                                if (i == 0) {
                                    if (MsgPic == "") {
                                        $("#span_image").html("封面图片");
                                    }
                                    else {
                                        $("#span_image").html("<img src=\"" + MsgPic + "\" />");
                                    }
                                    $("#span_title").html(MsgTitle);
                                    $("#txt_Id").val(subid);
                                    $("#txt_firstid").val(subid);
                                }
                                else {
                                    var tempStr = '<dl>';
                                    tempStr += '  <a href="javascript:void(0)">';
                                    tempStr += '	<dt>' + MsgTitle + '</dt>';
                                    tempStr += '  <dd>' + (MsgPic == "" ? "缩略图" : "<img src=\"" + MsgPic + "\" />") + '</dd>';
                                    tempStr += '  <div class="clear"></div></a>';
                                    tempStr += '   <div class="ct_dl_bj"><a href="javascript:void(0)" onclick="edit(' + subid + ',0,this)"><img src="/Content/images/wechat//ico005.png" /></a><a href="javascript:void(0)" onclick="del(' + subid + ',this)"><img src="/Content/images/wechat//ico004.png" /></a></div>';
                                    tempStr += '  </dl>'
                                    $("#divsubimagetext").append(tempStr);

                                }

                            }
                            editmain();
                        }
                    } else {
                        layer.msg(data.message);
                    }

                }, "json");
            }
            else {
                editmain();
            }
        }

    </script>
}
